<template>
	<view>
		<uNavbar title="团队成员详情" ></uNavbar>
		<view class="search flex_dq">
			<view class="search_c flex_dq">
				<image src="../../static/icon/i_ss.png" mode="aspectFill"></image>
				<input type="text" placeholder="输入成员名称" v-model.trim="keywords" @confirm="initList" />
			</view>
			<text  @click="initList">搜索</text>
		</view>
		
		<view class="member flex_ld" v-for="(item,index) in memberList" :key="index">
			<view class="member_l flex_dq">
				<image :src="item.head_img" mode="aspectFill"></image>
				<view class="member_l_name flex_Z">
					<text class="f28 c0">{{item.nickname}}</text>
					<text class="f24 phone">{{item.phone}}</text>
				</view>
			</view>
			<view class="member_r flex_dq">
				<image src="../../static/icon/i_zl.png" mode="aspectFill"></image>
				<text class="f30 c0">{{item.combat_effectiveness}}</text>
			</view>
		</view>
		<!-- 暂无数据 / 加载更多 -->
		<noDatas :xxxList="memberList" :status="status"></noDatas>
	</view>
</template>

<script>
	import {teamDetails} from "../../api/index.js"
	export default {
		data() {
			return {
				page: 1,
				size: 20,
				ids:'',
				keywords:'',//搜索
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				search: '',
				phone: '13622229999',
				avatar:'../../static/image/logo.png',
				memberList:[]
			}
		},
		onLoad(e) {
			console.log(e);
			this.ids = e.id
			this.initList()
		},
		methods: {
			//隐藏手机号
			// phoneNumShow(phone) {
			// 	console.log('手机号',phone);
			// 	let mphone = phone.substring(0, 3) + '****' + phone.substring(7);
			// 	return mphone;
			// },
			// 初始化
			initList() {
				let data = {
					keywords:this.keywords,
					team_id:this.ids,
					page:this.page,
				}
				teamDetails(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						let list = res.data.data;
						this.memberList = this.page == 1 ? list : this.memberList.concat(list);
						// console.log(this.memberList);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					} else {
						uni.$u.toast(res.msg);
					}
				})
			},
			
			// 返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('下拉刷新');
			let that = this;
			setTimeout(function() {
				that.page = 1,
				that.keywords = '',
				that.memberList = [],
				that.initList()
			}, 800);
		},
		//触底加载
		onReachBottom() {
			console.log('触底加载');
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.initList()
			}
		}
	}
</script>
<style>
	page {
		background: #211E38;
	}
</style>
<style scoped>
	.search {
		position: relative;
		width: 690rpx;
		height: 68rpx;
		margin: 30rpx auto;
		border: 1rpx solid #FF2CDF;
		border-radius: 40rpx;
	}
	
	.search>text {
		width: 142rpx;
		height: 68rpx;
		line-height: 68rpx;
		background: linear-gradient(274deg, #0014FF, #8020EF, #FF2CDF);
		border-radius: 40rpx;
		font-size: 30rpx;
		color: #ffffff;
		text-align: center;
		margin-right: -2rpx;
	}
	
	.search_l {
		width: 24%;
		font-size: 24rpx;
		color: #ffffff;
	}
	
	.search_l>image {
		width: 24rpx;
		height: 14rpx;
		margin-left: 10rpx;
	}
	

	.sign {
		font-size: 16rpx;
		background: #322854;
		border-radius: 20rpx;
		color: #DFA1ED;
		padding-right: 20rpx;
	}

	.sign>text {
		margin-left: 6rpx;
	}

	.sign_l {
		color: #ffffff;
		font-size: 16rpx;
		width: 60rpx;
		height: 30rpx;
		padding: 10rpx 0;
		border-radius: 10rpx 0 0 10rpx;
		background: linear-gradient(270deg, rgba(203, 39, 230, 0.8), rgba(18, 22, 253, 0.8));
	}

	.search_c {
		width: 80%;
	}

	.search_c>image {
		width: 32rpx;
		height: 32rpx;
		margin: 0 20rpx 0 26rpx;
	}

	.search_c>input {
		color: #C7C7CC;
		font-size: 24rpx;
	}
	.member{
		width: 92%;
		margin: 0 auto;
		padding: 20rpx 0;
		/* background: pink; */
		border-bottom: 1rpx solid #ffffff10;
	}
	.member_l>image{
		width: 76rpx;
		height: 76rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}
	.phone{
		color: #A7A4AD;
	}
	.member_r>image{
		width: 32rpx;
		height:32rpx;
		margin-right: 14rpx;
	}

</style>